<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8" />
    <title>Crovex - Admin & Dashboard Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- App favicon -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <link rel="shortcut icon" href="../images/favicon.ico"><!-- App css -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/jquery-ui.min.css" rel="stylesheet">
    <link href="../css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/metisMenu.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/app.min.css" rel="stylesheet" type="text/css" />
    <style>
        .custom-control-label::after {
            top: .38rem;
            left: -2.1rem;
        }
    </style>
</head>

<body class="account-body accountbg">
<!-- Log In page -->
<div class="container">
    <div class="row vh-100 ">
        <div class="col-12 align-self-center">
            <div class="auth-page">
                <div class="card auth-card shadow-lg">
                    <div class="card-body">
                        <div class="px-3">
                            <div class="auth-logo-box"><a href="../mian/index.html"
                                                          class="logo logo-admin"><img src="../images/logo-sm.png" height="55" alt="logo"
                                                                                       class="auth-logo"></a></div>
                            <!--end auth-logo-box-->
                            <div class="text-center auth-logo-text">
                                <h4 class="mt-0 mb-3 mt-5">Free Register for Crovex</h4>
                                <p class="text-muted mb-0">Get your free Crovex account now.</p>
                            </div>
                            <!--end auth-logo-text-->
                            <form class="form-horizontal auth-form my-4">
                                <div class="form-group"><label for="recommendUsername">推荐人</label>
                                    <div class="input-group mb-3"><span class="auth-form-icon"><i
                                            class="dripicons-user"></i></span><input type="text"
                                                                                     class="form-control" id="recommendUsername" placeholder="输入推荐人用户名"></div>
                                    <p class="text-muted mb-0">如果有请填写，双方将会同时获得30积分，无则不填写.</p>
                                </div>
                                <div class="form-group"><label for="username">用户名</label>
                                    <div class="input-group mb-3"><span class="auth-form-icon"><i
                                            class="dripicons-user"></i></span><input type="text"
                                                                                     class="form-control" id="username" placeholder="输入用户名"></div>
                                </div>
                                <!--end form-group-->
                                <div class="form-group"><label for="userpassword">设置密码</label>
                                    <div class="input-group mb-3"><span class="auth-form-icon"><i
                                            class="dripicons-lock"></i></span><input type="password"
                                                                                     class="form-control" id="userpassword" placeholder="输入密码">
                                    </div>
                                </div>
                                <!--end form-group-->
                                <div class="form-group"><label for="conf_password">确认密码</label>
                                    <div class="input-group mb-3"><span class="auth-form-icon"><i
                                            class="dripicons-lock-open"></i></span><input type="password"
                                                                                          class="form-control" id="conf_password"
                                                                                          placeholder="输入确认密码"></div>
                                    <!--end form-group-->
                                </div>
                                <!--end form-group-->
                                <div class="form-group"><label for="username">悠学派账号</label>
                                    <div class="input-group mb-3"><span class="auth-form-icon"><i
                                            class="dripicons-user"></i></span><input type="text"
                                                                                     class="form-control" id="wisdomusername" placeholder="输入悠学派账号"></div>
                                </div>
                                <!--end form-group-->
                                <div class="form-group"><label for="userpassword">悠学派密码</label>
                                    <div class="input-group mb-3"><span class="auth-form-icon"><i
                                            class="dripicons-lock"></i></span><input type="password"
                                                                                     class="form-control" id="wisdompassword" placeholder="输入悠学派密码">
                                    </div>
                                </div>
                                <!--end form-group-->
                                <div class="form-group row mt-4">
                                    <div class="col-sm-12">
                                        <div class="custom-control custom-switch switch-success"><input
                                                type="checkbox" class="custom-control-input"
                                                id="customSwitchSuccess"><label
                                                class="custom-control-label text-muted" for="customSwitchSuccess">我已阅读并同意相关服务条款和隐私政策
                                            <a href="#" class="text-primary" onclick="checkPrivacy()">《隐私政策》</a></label></div>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end form-group-->
                                <div class="form-group mb-0 row">
                                    <div class="col-12 mt-2"><button
                                            class="btn btn-gradient-primary btn-round btn-block waves-effect waves-light"
                                            type="submit" id="registerBtn">注册 <i class="fas fa-sign-in-alt ml-1"></i></button>
                                    </div>
                                    <!--end col-->
                                </div>
                                <!--end form-group-->
                            </form>
                            <!--end form-->
                        </div>
                        <!--end /div-->
                        <div class="m-3 text-center text-muted">
                            <p class="">已经拥有账号了? <a href="../login"
                                                    class="text-primary ml-2">登录</a></p>
                        </div>
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end auth-card-->
        </div>
        <!--end col-->
    </div>
    <!--end row-->
</div>
<!--end container-->
<!-- End Log In page -->
<!-- jQuery -->
<script src="../js/index.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="../js/layer.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/metismenu.min.js"></script>
<script src="../js/waves.js"></script>
<script src="../js/feather.min.js"></script>
<script src="../js/jquery.slimscroll.min.js"></script><!-- App js -->
<script src="../js/app.js"></script>
<script>
    function checkReg(){
        var password = document.getElementById("userpassword").value;
        var confpassword = document.getElementById("conf_password").value;
        if(!(password.length > 5 && password.length < 13)){
            layer.msg('密码长度必须大于等于6并且小于等于12!', {
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
                $('#userpassword').val("");
                $('#conf_password').val("");
            });
            return false;
        }
        if(password != confpassword){
            layer.msg('两次密码输入不一致!', {
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
                $('#userpassword').val("");
                $('#conf_password').val("");
            });
            return false;
        }
        if (!$("#customSwitchSuccess").get(0).checked) {
            layer.msg('请先同意服务与隐私政策!', {
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
            return false
        }
        return true;
    };
    function checkPrivacy(){
        //示范一个公告层
        layer.open({
            type: 1
            ,
            title: false //不显示标题栏
            ,
            closeBtn: false
            ,
            area: '500px;'
            ,
            shade: 0.8
            ,
            id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,
            btn: ['同意', '拒绝']
            ,
            btnAlign: 'c'
            ,
            moveType: 1 //拖拽模式，0或者1
            ,
            content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><p style="margin-left: 33%;color: #fff; font-weight: 600;font-size: 20px">《隐私协议》</p> 使用本站所有用户信息都会被上传至服务器进行存储<br>如果你不同意上传，请勿使用本站！<br>使用本站代表你已同意！<br><br><p style="color: #FF0000; font-weight: 600;">同时本站的所有收入均用作服务器的维护。</p></div>'
            ,
            yes: function () {
                $("#customSwitchSuccess").prop('checked',true);
                layer.closeAll();
            },
            btn2 : function () {
                $("#customSwitchSuccess").prop('checked',false);
                layer.closeAll();
            }
        });
    }
    $(function(){
        $('#registerBtn').on('click', function(){
            event.preventDefault();
            if(checkReg()){
                var ii = layer.load(0, {shade: false});
                var recommendUsername = document.getElementById("recommendUsername").value;
                var username = document.getElementById("username").value;
                var password = document.getElementById("userpassword").value;
                var wisdomUsername =  document.getElementById("wisdomusername").value;
                var wisdomPassword =  document.getElementById("wisdompassword").value;
                var header = $("meta[name='_csrf_header']").attr("content");
                var token =$("meta[name='_csrf']").attr("content");
                $.ajax({
                    cache: false,
                    type: "POST",
                    url:"../register",
                    contentType:'application/json;charset=UTF-8',
                    data:JSON.stringify({"recommendUsername":recommendUsername,"username":username,"password":password,"wisdomUsername":wisdomUsername,"wisdomPassword":wisdomPassword}),
                    async: true,
                    beforeSend : function(xhr) {
                        xhr.setRequestHeader(header, token);
                    },
                    success: function(data) {
                        console.log(data);
                        console.log(data.code);
                        layer.close(ii);
                        if(data.code == '200'){
                            layer.msg(username + ',注册成功!', {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                document.location.replace('../');
                            });
                        }else{
                            layer.msg('注册失败，' + data.msg, {
                                icon: 2,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){

                            });
                        }
                    },
                });
            }
        });
    })
</script>
</body>

</html>